<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
    工程名：MealOrder
    时间： 17-2-21
    作者：白雨濃 evil
    邮箱：evilbai@foxmail.com
    内容：
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--去除多余空格--%>
<%@ page trimDirectiveWhitespaces="true" %>
<%--h5声明--%>
<div class="container">
    <div class="navigation">
        <ol class="breadcrumb">
            <li><a href="#">基本信息</a></li>
            <li class="active">员工信息</li>
        </ol>
    </div>

    <div id="employee-layout">
        <table id="employee-list" class="table table-hover hidden">
            <caption>
                <span>员工信息</span>
                <div class="pull-right">
                    <button id="is-all-btn" class="btn btn-sm btn-info">
                        <span class="glyphicon glyphicon-resize-full"> 显示全部</span>
                    </button>
                    <button id="add-btn" class="btn btn-sm btn-success">
                        <span class="glyphicon glyphicon-plus"> 添加新员工</span>
                    </button>
                </div>
            </caption>
            <thead>
            <tr>
                <th>工号</th>
                <th>姓名</th>
                <th>工种</th>
                <th>薪资</th>
                <th>奖金</th>
                <th>入职时间</th>
                <th>离职时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="e in list">
                <td>
                    <a :class="[ e.leaveDateTime!=null?'leave':'' ]" href="#" @click="fix_employee(e)">
                        {{ e.employeeId }}
                    </a>
                </td>
                <td>{{ e.name }}</td>
                <td>{{ e.typeOfWork!=null?e.typeOfWork.type:'空' }}</td>
                <td>{{ e.salary }}</td>
                <td>{{ e.bonus }}</td>
                <td>{{ e.entryDateTime!=null?e.entryDateTime:'未设置' }}</td>
                <td>{{ e.leaveDateTime!=null?e.leaveDateTime:'尚未离职' }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div id="employee-dialog" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="employeeLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="employeeLabel" class="modal-title">{{ title }}</h4>
            </div>

            <div class="modal-body">
                <form class="input form-horizontal" role="form" enctype="multipart/form-data">

                    <input id="meal-id" name="employeeId" type="hidden" v-model="employee.employeeId">

                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">名称</label>
                        <div class="col-sm-7">
                            <input id="name" name="name" type="text" class="form-control input-sm"
                                   placeholder="请输入员工名称" v-model="employee.name">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="typeOfWorkId" class="col-sm-3 control-label">工种</label>
                        <div class="col-sm-5">
                            <select id="typeOfWorkId" name="typeOfWorkId" class="form-control input-sm"
                                    v-model="typeOfWork.typeOfWorkId">
                                <option></option>
                                <option v-for="type in typeOfWorkList" :value="type.typeOfWorkId">
                                    {{ type.state?type.type:type.type+'（关闭）' }}
                                </option>
                            </select>
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="salary" class="col-sm-3 control-label">工资</label>
                        <div class="col-sm-3">
                            <input id="salary" name="salary" type="text" class="form-control input-sm"
                                   placeholder="请输入员工工资" v-model="employee.salary">
                            <span class="help-block"></span>
                        </div>

                        <label for="bonus" class="col-sm-2 control-label">奖金</label>
                        <div class="col-sm-3">
                            <input id="bonus" name="bonus" type="text" class="form-control input-sm"
                                   placeholder="请输入员工奖金" v-model="employee.bonus">
                            <span class="help-block"></span>
                        </div>
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button v-if="title!='新增员工'" id="leave-submit" type="button"
                        class="btn btn-danger" @click="leave">
                    离职提交
                </button>
                <button id="dialog-submit" type="button" class="btn btn-info" @click="submit">提交更改</button>
            </div>
        </div>
    </div>
</div>

<script src="<c:url value="/static/js/vue.min.js"/>"></script>
<script src="<c:url value="/static/js/setting_employee.js"/>"></script>